<!-- using a hyperscript hack to make the modal pop correctly when it's loaded -->
<dialog class="modal" _="on load call me.showModal()">
    <div class="modal-box w-full">
        <h2 class="font-bold text-xl">
            Edit <span class="rarity-{{.Rarity}}-text"
        >
                {{.Name}}
            </span>
        </h2>
        <div id="modal-alert-container"></div>
        <form
            hx-patch="/api/v1/depot/edit/{{.ItemID}}?commander_id={{.CommanderID}}&data={{or .Data -1}}"
            hx-include="input"
            hx-swap="outerHTML"
            hx-target="#depot-content"
            hx-target-error="#modal-alert-container"
            _="on htmx:afterOnLoad if detail.xhr.status == 200 call (closest <dialog/>).close()"
        >
            {{if not (eq .Type 23)}}
                <label class="form-control w-full">
                    <div class="label">
                        <span class="label-text">Count</span>
                    </div>
                    <input type="number" name="count" value="{{.Count}}" class="input input-primary input-bordered" min="1" max="4294967295" required>
                </label>
            {{end}}
            {{if eq .Type 23}}
                <label class="form-control w-full">
                    <div class="label">
                        <span class="label-text">Data</span>
                    </div>
                    <input type="number" name="data" value="{{.Data}}" class="input input-primary input-bordered" min="1" max="4294967295" required>
                </label>
            {{end}}
            <div class="join flex justify-center mt-2">
                <button class="btn btn-success join-item" type="submit" name="action" value="save">
                    <i class="bi-floppy2-fill"></i>
                    Save
                </button>
                <button class="btn btn-error join-item" type="submit" name="action" value="delete">
                    <i class="bi-trash3-fill"></i>
                    Remove
                </button>
            </div>
        </form>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>